<template>
  <div>
    <div class="bot">
      {{ store.Len }}item left
      <div class="active" v-if="store.flags === true">All</div>
      <div
        v-for="(item, index) in store.arr"
        :key="index"
        @click="chen(index)"
        v-else
        :class="store.Aid === index ? 'active' : ''"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "../stores/counter";
import { computed, defineProps } from "vue";
const store = useStore();
const chen = (index) => {
  store.Aid = index;
  store.Jump();
};
const len = computed(() => {
  return store.List.filter((item) => {
    item.flag === false;
  }).length;
});
defineProps({});
</script>

<style>
.bot {
  width: 500px;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  padding-right: 50px;
  position: fixed;
  margin-right: 10px;
  bottom: 120px;
}

.active {
  box-sizing: border-box;
  padding: 2px;
  background-color: #fe7345;
  border-radius: 5px;
  color: #fff;
}
</style>
